<template>
  <div>
    <page-header
      zhTitle="投资者信息"
      enTitle="Investor Information"
      :pageHeaderImage="pageHeaderImage"
    ></page-header>
    <section
      class="stocks-info"
      style="max-width:1200px;margin:0 auto;line-height:1.6"
    >
      <div style="display:flex">
        <div class="left" style="width:50%;float:left">
          <img
            style="width:100%;"
            src="https://www.jereh.com/cn/upload/images/2018/07/03/ecc52555164743d79910ea529fde0f7c.jpg"
          />
        </div>
        <div class="right" style="width:50%;float:right">
          <div
            class="data-container"
            style="background-color:#fafafa;padding:27px 55px 39px 52px"
          >
            <!-- <div class="baseinfo" style="padding-bottom:14px;border-bottom:1px solid #e0e1e2"> -->

            <div
              class="baseinfo fall"
              style="padding-bottom:14px;border-bottom:1px solid #e0e1e2"
            >
              <span style="font-size:18px;color:#3c3c3c;margin-right:6px">
                <!-- {{ stockInfo.stockName }} -->
                上证指数
              </span>
              <span style="font-size:18px;color:#3c3c3c;margin-right:6px"
                >代码：000001</span
              >
              <span
                class="text-color"
                style="font-size:36px;margin-left:14px;margin-right:6px;"
                >{{ stockInfo.currentPrice }}</span
              >
              <div
                class="text-color"
                style="display:inline-block;margin-left:14px;"
              >
                <div style="font-size:14px;">{{ stockInfo.increase }}</div>
                <div style="font-size:14px;">{{ stockInfo.increaseRatio }}</div>
              </div>
            </div>
            <div style="width:100%;padding-top:36px;margin-bottom:24px">
              <ul style="padding:0">
                <li style="float:left;list-style:none;width:25%">
                  <div style="font-size:14px;color:#787878">最高</div>
                  <div style="font-size:22px;color:#1d314e;font-family:Arial;">
                    {{ stockInfo.highestPrice }}
                  </div>
                </li>
                <li style="float:left;list-style:none;width:25%">
                  <div style="font-size:14px;color:#787878">最低</div>
                  <div style="font-size:22px;color:#1d314e;font-family:Arial;">
                    {{ stockInfo.lowestPrice }}
                  </div>
                </li>
                <li style="float:left;list-style:none;width:25%">
                  <div style="font-size:14px;color:#787878">成交量(万手)</div>
                  <div style="font-size:22px;color:#1d314e;font-family:Arial;">
                    {{ stockInfo.volume }}
                  </div>
                </li>
                <li style="float:left;list-style:none;width:25%">
                  <div style="font-size:14px;color:#787878">成交额(亿)</div>
                  <div style="font-size:22px;color:#1d314e;font-family:Arial;">
                    {{ stockInfo.turnover }}
                  </div>
                </li>
                <div style="clear:both"></div>
              </ul>
            </div>
            <div class="note" style="font-size:13px;color:#b9b9b9">
              截至 {{ stockInfo.yymmdd }}
              {{ stockInfo.hhmmss }} 北京时间*报价有十五分钟或以上延迟。
            </div>
          </div>

          <div class="stocks-info" style="padding:27px 0px 0px 52px">
            <div>
              <span
                @click="isKLine = !isKLine"
                id="k-line"
                style="cursor:pointer;"
                :style="isKLine ? 'color:red' : 'color:black'"
                >k线图</span
              >
              <span
                @click="isKLine = !isKLine"
                id="min-hour"
                style="margin-left:20px;cursor:pointer;"
                :style="isKLine ? 'color:black' : 'color:red'"
                >分时线图</span
              >
            </div>
            <div style="width:100%;margin-top:20px">
              <img
                style="width:100%"
                id="stock-img"
                :src="
                  isKLine
                    ? 'https://image.sinajs.cn/newchart/daily/n/sh000001.gif'
                    : 'https://image.sinajs.cn/newchart/min/n/sh000001.gif'
                "
              />
              <!-- <img src="https://image.sinajs.cn/newchart/min/n/sh000001.gif" alt=""> -->
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
import PageHeader from "../../components/PageHeader.vue";
import pageHeaderImage from "../../../public/img/bg_tzzxx.png";
import { mapState } from "vuex";
export default {
  name: "investor",
  components: {
    PageHeader,
  },
  asyncData({ store }) {
    return store.dispatch("GET_STOCK_DATA");
  },
  data() {
    return { pageHeaderImage, isKLine: true };
  },
  computed: {
    ...mapState(["stockInfo"]),
  },
  methods: {},
};
</script>

<style lang="scss">
.text-color {
  color: red;
}
.fall .text-color {
  color: green;
}
</style>
